/***************************************/
//收起天气信息按钮
var recycleWea = document.querySelector('.recycleWeather')
var weatherapi = document.querySelector('.weatherApi')
// 设置全局变量,show属性是用来判断weatherApi是否隐藏，true表示展示，false表示已经隐藏
var show = weatherapi.getAttribute('show')
recycleWea.onclick=function(){
	weatherapi.classList.add('hidden')
	weatherapi.setAttribute("shwo",false)
	recycleWea.classList.add('hidden')
}
/***************************************/

/*异步交互*/
// oneshow为true表示天气信息显示了一次，false表示还未第一次显示
var oneshow = false //但是未成功

document.querySelector('.newWeather .searchWeather').onclick=function(){
		//1. 创建请求对象
		var request = new XMLHttpRequest()
		//2. 设置请求方法和请求地址
		request.open('get','https://api.oioweb.cn/api/weather/GetWeather')
		//3. 发送请求 get不需要传输数据，其余方式需要
		request.send()
		//4. 等待响应事件
		request.onreadystatechange = function(){
			if(request.readyState === 4){
				js = JSON.parse(request.responseText)//json格式转换为js格式
				console.log(js)
				document.querySelector('.weatherApi .city').innerHTML = js.result.city.name
				
				var div = document.querySelector('.weatherContent')
				var html = '<div class="wea">天气：'+ js.result.condition.condition+'</div>'+
						'<div class="tem">气温：'+ js.result.condition.temp+'°</div>'+
						'<div class="presure">气压：'+ js.result.condition.pressure+'Kpa</div>'+
						'<div class="sunRise">日出时间：'+ js.result.condition.sunRise+'</div>'+
						'<div class="sunDown">日落时间：'+ js.result.condition.sunSet+'</div>'+
						'<div class="win">风向：'+ js.result.condition.windDir+'</div>'+
						'<div class="tips">tips：'+ js.result.condition.tips+'</div>'+
						'<div class="updatetime">更新时间：'+ js.result.condition.updatetime+'</div>'
				div.innerHTML += html
				
				var ul = document.querySelector('.weatherForecast ul')
				js.result.forecast.forEach((day,i)=>{
					var htmlForecast = '<li>'+
									'<div class="weekday">今后第'+(i+1)+'天</div>'+
									'<div class="weaDay">白天天气：'+ day.conditionDay+'</div>'+
									'<div class="weaNight">夜间天气：'+ day.conditionNight+'</div>'+
									'<div class="temDay">白天气温：'+ day.tempDay+'°</div>'+
									'<div class="temNight">夜间气温：'+ day.tempNight+'°</div>'+
									'<div class="sunrise">日出时间：'+ day.sunrise+'</div>'+
									'<div class="sundown">日落时间：'+ day.sunset+'</div>'+
									'<div class="winDir">风向：'+ day.windDirDay+'</div>'+
									'<div class="winSpeedDay">风速：'+ day.windSpeedDay+'</div>'+
									'<div class="predictDate">预测时间：'+ day.updatetime+'</div>'+
									'</li>'
									// console.log(htmlForecast)
					ul.innerHTML += htmlForecast
				})
				
				//展示天气信息后，显示出收起信息的按钮
				var recycleWea = document.querySelector('.recycleWeather')
				recycleWea.classList.remove('hidden')
				// 判断weatherApi的show属性是否是false，是则表示已经隐藏，则改为true，并且去掉hidden使其显示
				if(!show){ 
					weatherapi.classList.remove("hidden")
					weatherapi.setAttribute("show",true)
				}
			}
		}
	

// 点击后改变宽度和背景
var weatherApi = document.querySelector('.weatherApi')
	weatherApi.classList.add('widthChange')
	weatherApi.style = 'background-color:aqua'
}
